<template>
  <div class="login">
    <div class="from" @keydown.enter="submitForm('ruleForm')">
      <h1 class="text">水牛后台</h1>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        size="small"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="ruleForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="ruleForm.password"
          ></el-input>
        </el-form-item>
        <el-row class="box">
          <el-button
            type="primary"
            size="small"
            @click="submitForm('ruleForm')"
          >
            登录
          </el-button>
          <el-button type="info" size="small" @click="resetForm('ruleForm')">
            重置
          </el-button>
        </el-row>
      </el-form>
    </div>
    <div class="svg">
      <svg
        class="editorial"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28"
        preserveAspectRatio="none"
      >
        <defs>
          <path
            id="gentle-wave"
            d="M-160 44c30 0 
				 58-18 88-18s
				 58 18 88 18 
				 58-18 88-18 
				 58 18 88 18
				 v44h-352z"
          />
        </defs>
        <g class="parallax">
          <use
            xlink:href="#gentle-wave"
            x="50"
            y="0"
            fill="#fff"
            fill-opacity="0.5"
          />
          <use xlink:href="#gentle-wave" x="50" y="3" fill="skyblue" />
          <use
            xlink:href="#gentle-wave"
            x="50"
            y="6"
            fill="#fff"
            fill-opacity="0.5"
          />
        </g>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        password: '',
        username: '',
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
          },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push('/layout')
          this.$message('登录成功')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style scoped>
.login {
  background-color: rgb(75, 179, 240);
  width: 100%;
  height: 100%;
  position: absolute;
}
.from {
  width: 500px;
  height: 280px;
  background-color: #fff;
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.from h1 {
  font-weight: 500;
  text-align: center;
  margin: 20px auto;
  font-size: 30px;
}
.demo-ruleForm {
  width: 80%;
  margin: 10px 24px;
}
.demo-ruleForm .el-input {
  display: block;
  margin: 4px auto;
}
.box {
  margin-top: 20px;
  float: right;
}
.svg {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.parallax > use {
  animation: move-forever 12s linear infinite;
}

.parallax > use:nth-child(1) {
  animation-delay: -2s;
}

.parallax > use:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 5s;
}

.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 3s;
}

@keyframes move-forever {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
.text {
  background-image: -webkit-linear-gradient(
    left,
    blue,
    #66ffff 10%,
    #cc00ff 20%,
    #cc00cc 30%,
    #ccccff 40%,
    #00ffff 50%,
    #ccccff 60%,
    #cc00cc 70%,
    #cc00ff 80%,
    #66ffff 90%,
    blue 100%
  );
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  animation: masked-animation 4s linear infinite;
}
@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>
